<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!--[if lt IE 8]>
           <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
       <![endif]-->
<!-- Header Area Start -->
<header>
	<!-- Header Menu Area -->
	<div class="menu-area mt-60">
		<div class="container">
			<div class="row">
				<div class="col-md-3 col-sm-12">
					<div class="logo-area text-center text-uppercase">
						<a href="${rootPath }/IndexHeadServlet?method=main">
							<img src="${rootPath}/img/icon/logo.png" alt="" />
						</a>
					</div>
				</div>
				<div class="col-md-9 col-sm-12">
					<div class="main-menu lemon-bg">
						<nav>
							<ul id="nav">
								<li><a href="${rootPath }/IndexHeadServlet?method=main">首页</a></li>
								<li><a href="about.html">About Us</a></li>
								<li><a href="shop.html">SHOP</a>
									<ul>
										<li><a href="shop.html"><i
												class="arrow_carrot-right"></i> Shop</a></li>
										<li><a href="shop-grid.html"><i
												class="arrow_carrot-right"></i> Shop Grid</a></li>
										<li><a href="shop-list.html"><i
												class="arrow_carrot-right"></i> Shop List</a></li>
										<li><a href="single-product.html"><i
												class="arrow_carrot-right"></i> Single Product</a></li>
									</ul></li>
								<li><a href="blog.html">BLOG</a>
									<ul>
										<li><a href="blog.html"><i
												class="arrow_carrot-right"></i>Blog</a></li>
										<li><a href="blog-details.html"><i
												class="arrow_carrot-right"></i>Blog Details</a></li>
									</ul></li>
								<li><a href="#">PAGES</a>
									<ul>
										<li><a href="checkout.html"><i
												class="arrow_carrot-right"></i>Checkout</a></li>
										<li><a href="cart.html"><i
												class="arrow_carrot-right"></i>Cart</a></li>
										<li><a href="account.html"><i
												class="arrow_carrot-right"></i>Account</a></li>
										<li><a href="login.html"><i
												class="arrow_carrot-right"></i>Login</a></li>
									</ul></li>
								<li><a href="portfolio.html">PORTFOLIO</a></li>
								<li><a href="contact.html">CONTACT</a></li>
							</ul>
						</nav>
						<!-- Product Cart -->
						<div class="menu-right-area">
							<a href="#" class="mini-cart-icon"> <i class="icon_cart_alt"></i>
								<span>2</span>
							</a>
							<div class="top-cart-content">
								<!-- Cart Single -->
								<div class="media header-middle-checkout">
									<div class="media-left check-img">
										<a href="#"> <img alt=""
											src="${rootPath}/img/other/cart-1.jpg">
										</a>
									</div>
									<div class="media-body checkout-content">
										<h4 class="media-heading">
											<a href="#">Men Fashion Spray</a> <span
												title="Remove This Item" class="btn-remove checkout-remove">
												<i class="fa fa-trash"></i>
											</span>
										</h4>
										<p>1 x $111.00</p>
									</div>
								</div>
								<!-- Cart Single -->
								<!-- Cart Single -->
								<div class="media header-middle-checkout">
									<div class="media-left check-img">
										<a href="#"> <img alt=""
											src="${rootPath}/img/other/cart-2.jpg">
										</a>
									</div>
									<div class="media-body checkout-content">
										<h4 class="media-heading">
											<a href="#">Women Fashion Bag</a> <span
												title="Remove This Item" class="btn-remove checkout-remove">
												<i class="fa fa-trash"></i>
											</span>
										</h4>
										<p>3 x $125.00</p>
									</div>
								</div>
								<!-- Cart Single -->
								<div class="actions">
									<button type="button" title="Checkout-botton"
										class="Checkout-botton">
										<span>Checkout</span>
									</button>
								</div>
							</div>
						</div>
						<!-- Product Cart -->
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- Header Menu Area -->
	<!-- Header Slider Area -->
	<div class="slider-area">
		<div class="bend niceties preview">
			<div id="ensign-nivoslider" class="slides">
				<img src="${rootPath}/img/slider/1.jpg" alt=""
					title="#slider-direction-1" /> <img
					src="${rootPath}/img/slider/2.jpg" alt=""
					title="#slider-direction-1" />
			</div>
			<!-- direction 1 -->
			<div id="slider-direction-1" class="slider-direction">
				<div class="slider-content text-center s-tb slider-1">
					<div class="title-container s-tb-c title-compress">
						<h2 class="title2">
							<span class="icon-left" data-icon="&#x7b;"></span> exclusive &
							glamours looks <span class="icon-right" data-icon="&#x7b;"></span>
						</h2>
						<h1 class="title1">sopzon 2020 collections</h1>
						<div class="slider-btn text-uppercase">
							<a href="#">View All <span class="icon-left"
								data-icon="&#x24;"></span></a>
						</div>
						<!-- Icon Left -->
						<div class="social-icon-left">
							<ul>
								<li><a href="#" class="social_facebook"></a></li>
								<li><a href="#" class="social_googleplus"></a></li>
								<li><a href="#" class="social_twitter"></a></li>
							</ul>
						</div>
						<!-- Icon Left -->
						<!-- Icon Right -->
						<div class="social-icon-right">
							<ul>
								<li><a href="#" class="icon_refresh"></a></li>
								<li><a href="#" class="icon_heart_alt"></a></li>
								<li><a href="#" class=" icon_search"></a></li>
							</ul>
						</div>
						<!-- Icon Right -->
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- Header Slider Area -->
	<!-- MOBILE-MENU-AREA START -->
	<div class="mobile-menu-area">
		<div class="container">
			<div class="row">
				<div class="col-md-12 col-sm-12">
					<div class="mobile-area">
						<div class="mobile-menu">
							<nav id="mobile-nav">
								<ul>
									<li><a href="index.html">Home </a>
										<ul>
											<li><a href="index.html">Home Two</a></li>
											<li><a href="index-3.html">Home Three</a></li>
											<li><a href="index-4.html">Home Four</a></li>
										</ul></li>
									<li><a href="about.html"> About Us </a></li>
									<li><a href="shop.html">SHOP</a>
										<ul>
											<li><a href="shop.html">Shop</a></li>
											<li><a href="shop-grid.html"> Shop Grid</a></li>
											<li><a href="shop-list.html"> Shop List</a></li>
											<li><a href="single-product.html">Single Product</a></li>
										</ul></li>
									<li><a href="blog.html">Blog</a></li>
									<li><a href="blog-details.html">Blog Details</a></li>
									<li><a href="#">PAGES</a>
										<ul>
											<li><a href="checkout.html">Checkout</a></li>
											<li><a href="cart.html">Cart</a></li>
											<li><a href="account.html">Account</a></li>
											<li><a href="wishlist.html">Wishlist</a></li>
											<li><a href="blog-details.html">Blog</a></li>
											<li><a href="login.html">Login</a></li>
										</ul></li>
									<li><a href="portfolio.html">Portfolio</a></li>
									<li><a href="404.html">404 Error</a></li>
									<li><a href="contact.html">Contact</a></li>
								</ul>
							</nav>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- MOBILE-MENU-AREA END  -->
</header>
